"use client"

import type { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
import * as React from "react"

import { Button } from "~/registry/miami/ui/button"
import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
} from "~/registry/miami/ui/dropdown-menu"

type Checked = DropdownMenuCheckboxItemProps["checked"]

export default function DropdownMenuCheckboxes() {
   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
   const [showPanel, setShowPanel] = React.useState<Checked>(false)

   return (
      <DropdownMenu>
         <DropdownMenuTrigger asChild>
            <Button variant="outline">Open</Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-56">
            <DropdownMenuLabel>Appearance</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuCheckboxItem
               checked={showStatusBar}
               onCheckedChange={setShowStatusBar}
            >
               Status Bar
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem
               checked={showActivityBar}
               onCheckedChange={setShowActivityBar}
               disabled
            >
               Activity Bar
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem
               checked={showPanel}
               onCheckedChange={setShowPanel}
            >
               Panel
            </DropdownMenuCheckboxItem>
         </DropdownMenuContent>
      </DropdownMenu>
   )
}
